<template>
    <div>
        <video ref="myvideo" style="width: 500px;" :poster="imgUrl" controls :src="videoUrl"></video>
        <img ref="myimg" :src="imgUrl" alt="" style="width: 640px;height: 368px;">
    </div>
</template>

<script>
export default {
    data () {
        return {
            videoUrl: 'http://47.92.235.205/2025/03/04/1896854995266633730.mp4',
            imgUrl: ''
        }
    },
    created() {
        this.getVideoBase64(this.videoUrl);
    },
    methods: {
        getVideoBase64(url) {
            let dataURL = '';
            let video = document.createElement("video");
            video.setAttribute('crossorigin', 'anonymous');//处理跨域
            video.setAttribute('src', url);
            video.setAttribute('width', 640);
            video.setAttribute('height', 368);
            video.currentTime = 1000;
            video.addEventListener('loadeddata', () => {
                let canvas = document.createElement("canvas");
                let width = video.width; //canvas的尺寸和图片一样
                let height = video.height;
                canvas.width = width;
                canvas.height = height;
                canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
                dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
                this.imgUrl = dataURL;
                // 使用箭头函数就没必要使用this.$refs
                // this.$refs.myimg.src = dataURL;
                // this.$refs.myvideo.poster = dataURL;
            });
        }
    }
};
</script>